# Component: Article Overview

Layout wrapper for article listings and filtering

![[Pasted image 20260426080925.png]]


### BEM Anatomy

| Type      | Class Name             | Description                                                                                               |
| --------- | ---------------------- | --------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-article-overview` | The top-level container for the listing page.                                                             |
| Modifier  | `--[type]`             | Dynamic modifier based on the Article Tag Name (e.g., `--blog`, `--shop`).                                |
| Element   | `__header`             | Contains the page title or active filter label.                                                           |
| Element   | `__title`              | The primary page heading (e.g., "Our Latest News"). Sets typography and alignment for the listing header. |
| Element   | `__layout`             | The internal Bootstrap `.row` managing the main/sidebar split.                                            |
| Element   | `__main`               | Primary content column (usually `col-md-9`).                                                              |
| Element   | `__sidebar`            | Secondary column for the Tag Cloud (usually `col-md-3`).                                                  |
| Element   | `__tag-cloud-wrapper`  | Container for the sidebar's navigation/filter links. Manages background, padding, and border-radius.      |
| Element   | `__row`                | Internal grid wrapper for article items. Overrides Bootstrap gutters.                                     |
| Element   | `__column`             | The grid cell containing an individual `.as-article-item`.                                                |

### Implementation Reference

##### Generated HTML

```html
<div class="as-article-overview as-article-overview--blog">
    <header class="as-article-overview__header">
        <h1 class="as-article-overview__title">Category Name</h1>
    </header>

    <div class="as-article-overview__layout row">
        <!-- Main Content -->
        <div class="as-article-overview__main col-md-9">
            <div class="as-article-overview__row row">
                <div class="as-article-overview__column col-md-4">
                    <!-- .as-article-item goes here -->
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="as-article-overview__sidebar col-md-3">
            <div class="as-article-overview__tag-cloud-wrapper">
                <!-- Tag Cloud Component -->
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-article-overview {
  &__row {
    // Ensuring consistent spacing between articles
    --bs-gutter-x: #{$spacer};
    --bs-gutter-y: #{$spacer};
  }

  // Type-specific overrides can be added here
  &--shop {
     // example: background-color: #f9f9f9;
  }
}
```

